<template>
	<view class="farm-skin">
		<view
			class="skin-top"
			v-if="dressShow">
			<image
				@click="changeShow"
				src="/static/images/chicken/skin_arrow.png" 
				mode="widthFix"></image>
		</view>
		<u-popup
			v-model="dressShow"
			mode="bottom"
			:mask="false"
			:mask-close-able="false"
			class="chicken-edit">
			<view class="box">
				<!-- tab -->
				<view class="dress-tab">
					<image
						src="/static/images/chicken/dress_tab.png"
						mode="widthFix"></image>
					<view class="tab-box">
						<view
							v-for="(val, index) in tabsList"
							:class="{
								choose: index == currentIndex,
							}"
							:style="index == currentIndex ? style : {}"
							:key="index"
							@click="tabClick(index)"
							class="tab-item">
							{{ val.name }}
						</view>
					</view>
				</view>
				
				<scroll-view
					scroll-y
					@scrolltolower="scrolltolower"
					class="center">
					<view class="dress-box">
						<view
							v-for="(val, index) in dressList"
							:key="index"
							@click="changeChoose(val)"
							class="box-item">
							<view class="item-top">
								<image
									v-if="!val.choose"
									class="choose-no"
									src="/static/images/chicken/dress_c_n.png"
									mode="widthFix"></image>
								<image
									v-else
									class="choose-yes"
									src="/static/images/chicken/dress_c_y.png"
									mode="widthFix"></image>
								<image
									class="dress-img"
									:src="val.img"
									mode="widthFix"></image>
							</view>
							<view class="item-text">{{ val.name }}</view>
							<view class="item-price">
								<image
									src="/static/images/chicken/dress_egg.png"
									mode="widthFix"></image>
								<text>{{ val.num }}+{{ val.price }}元</text>
							</view>
						</view>
					</view>
				</scroll-view>
				
				<image
					class="bg"
					src="/static/images/chicken/bg_dress.png"
					mode="widthFix"></image>
				<image
					class="close"
					@click="changeShow"
					src="/static/images/chicken/close.png"
					mode="widthFix"></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: 'chickenDress',
		props: {
			dressShow: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				skinList: [],
				currentIndex: 0,
				style: {},
				tabsList: [
					{ name: '套装' },
					{ name: '衣服' },
					{ name: '头饰' },
					{ name: '装饰' },
				],
				dressList: [
					{
						choose: true,
						img: '/static/images/chicken/chicken_1.png',
						name: '秋季套装',
						num: 50,
						price: 1,
					},
					{
						choose: false,
						img: '/static/images/chicken/chicken_1.png',
						name: '飞行套装',
						num: 150,
						price: 2,
					},
					{
						choose: false,
						img: '/static/images/chicken/chicken_1.png',
						name: '飞行套装',
						num: 150,
						price: 2,
					},
					{
						choose: false,
						img: '/static/images/chicken/chicken_1.png',
						name: '飞行套装',
						num: 150,
						price: 2,
					},
					{
						choose: false,
						img: '/static/images/chicken/chicken_1.png',
						name: '飞行套装',
						num: 150,
						price: 2,
					},
				],
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				let arr = [
					"url('/static/images/chicken/dress_tab_c_l.png')",
					"url('/static/images/chicken/dress_tab_c_c.png')",
					"url('/static/images/chicken/dress_tab_c_c.png')",
					"url('/static/images/chicken/dress_tab_c_r.png')",
				];
				this.style.backgroundImage = arr[this.currentIndex];
			},
			changeShow() {
				this.$emit('changeShow', 'dressShow');
			},
			tabClick(index) {
				this.currentIndex = index;
				this.init();
			},
			changeChoose(val) {
				this.dressList.forEach(v => {
					v.choose = false;
				});
				val.choose = true;
				this.$emit('dressChoose', val);
			},
			scrolltolower() {
				console.log(1111111111);
			},
			skinChoose(val) {
				this.changeShow();
				this.$emit('skinChoose', val);
			},
		}
	}
</script>

<style lang="scss" scoped>
.farm-skin {
	.skin-top {
		position: absolute;
		left: 26rpx;
		top: 30rpx;
		z-index: 10075;
		image {
			width: 64rpx;
		}
	}
}
.chicken-edit {
	.box {
		position: relative;
		width: 100%;
		min-height: 780rpx;
		background-color: transparent;
		.dress-tab {
			position: absolute;
			left: 27rpx;
			top: 144rpx;
			z-index: 1;
			width: calc(100% - 54rpx);
			image {
				width: 100%;
			}
			.tab-box {
				position: absolute;
				left: 0;
				top: 0;
				display: flex;
				align-items: center;
				width: 100%;
				.tab-item {
					width: 25%;
					line-height: 77rpx;
					background: no-repeat left center;
					background-size: 100% 100%;
					text-align: center;
					font-size: 32rpx;
					font-weight: 400;
					color: #7C2E20;
					overflow: hidden;
					&:not(:last-of-type) {
						border-right: 2rpx solid rgba(#e49b62, .2);
					}
					&.choose {
						color: #fff;
					}
				} 
			}
		}
		.center {
			position: absolute;
			left: 0;
			top: 240rpx;
			z-index: 1;
			width: calc(100% - 54rpx);
			height: calc(100% - 240rpx);
			padding: 0 27rpx;
			text-align: center;
			.dress-box {
				display: flex;
				flex-wrap: wrap;
				.box-item {
					position: relative;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-bottom: 18rpx;
					&:not(:nth-of-type(3n+3)) {
						margin-right: 16rpx;
					}
					.item-top {
						.choose-no,
						.choose-yes {
							width: 220rpx;
						}
						.dress-img {
							position: absolute;
							left: 16rpx;
							top: 16rpx;
							width: 188rpx;
						}
					}
					.item-text {
						margin: 16rpx 0;
						font-size: 28rpx;
						font-weight: 400;
						color: #7C2E20;
					}
					.item-price {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 180rpx;
						height: 48rpx;
						line-height: 48rpx;
						background: url('/static/images/chicken/btn.png') no-repeat center center;
						background-size: 100% 100%;
						font-size: 28rpx;
						font-weight: bold;
						color: #fff;
						image {
							width: 32rpx;
							margin-right: 6rpx;
						}
					}
				}
			}
		}
		.bg {
			width: 100%;
			margin-bottom: -10rpx;
		}
		.close {
			position: absolute;
			right: 10rpx;
			top: 70rpx;
			width: 46rpx;
		}
	}
}
</style>